NextJS Parallel Routes Explained with a Simple Example

[@felixreithmaier]

I cant understand why people complaining about next js getting harder. This is for edge cases and if you need a feature like that this is really handy. Thanks for the video and showing a nice example! :)

[@sunstar8417]

sir, you don't know, but many students in india are watching your html and css tutorial
thank you for it sir ,

[@jamesbotwina8744]

Thanks!

[@DaveGrayTeachesCode]

Thank you for the support!

[@diegocraftxx_gd9214]

Love the content and explanation. Keep it up❤

[@DaveGrayTeachesCode]

Thank you! Glad you found it helpful!

[@jfhandfield]

Can't wait for the modal video. Thank you for your time!

[@Beast80K]

Respected Sir, *Thankyou* for this simplified example !
Sir if possible, can you please make a video on how to optimize NextJS 14 project to get good Lighthouse score, what web vitals should be focused, what things affect scores etc.

[@VIIITTTTTAAA]

I'm just liking the great man's videos.

[@DaveGrayTeachesCode]

Thank you!

[@MrAlao675]

This concept is exhausting.
Will stick with the components for now 😅

[@marcinzale]

Another good explanation. Thanks!

[@DaveGrayTeachesCode]

You're welcome!

[@rammehar5531]

Wow great features please create a one more video on it with the use cases of this parallel routing. Thank you

[@voidmind]

I second that. The feature looks awesome, but I'd like to see it used in more real world scenarios

[@jaatjii315]

Hi dave Thank you for all these beautiful videos. Thanks a million❤️

[@soumadip_banerjee]

Congratulations 🎉 on your son's achievement Mr.Gray! Lots of love from the city of joy, Kolkata, India. He has done a remarkable job inspite of all the hurdles. Kudos to him! ❤ Definitely inspired me, to never give up, even in the murkiest times of my life 😊 🇮🇳💖🇺🇸

[@DaveGrayTeachesCode]

Thank you!

[@aurobindobhuyan2107]

3:36 Feeling great to be a part of 27.1%

[@irfansaeedkhan7242]

we need a production grade project from you sir

[@revenge425]

question, would the route be accessible if accessed directly?

[@DaveGrayTeachesCode]

Yes. Refresh the page to see what it is like accessed directly. You can even email the link to someone to access directly.

[@staticwasabi]

Thanks! Could you show a tab groups example?

[@MangoFlamingo]

My man. Thnaks

[@yashchauhan5710]

what if you want to have an entirely different ui for settings page? for this do i have to have conditional rendering in layout file?

[@DaveGrayTeachesCode]

I would need to understand your structure better, but yes, you could take that approach.

[@yarapolana]

What would you use the “default” for I am having a hard time understanding its use. Great video overall.

[@DaveGrayTeachesCode]

Thanks - I show one example in this video where the default is rendered. It is a fallback.

[@cb73]

Great to know how it works but what problem does it actually solve? I’ve yet to see anyone make the case.

[@podoprigoraisv]

Thank for the video. As for me it is very controversial feature. I've tried to implement kind of "master detail" layout but faced with drawbacks for "not found" routes and with dynamic parameters for a slot nested routes. I've rejected from this feature in favor to conditional rendering that depending upon route parameters.

[@DaveGrayTeachesCode]

Interesting! I use both route parameters and search parameters frequently.

[@o.j1398]

Thanks for a great tutorial, just have a question: is it possible to make parallel routing with diffrerent nextjs projects for example localhost:3000 and localhost:3001, localhost:3000 has sidebar of dashboard and localhost:3001 apper in dashboard if we navigate to it but sidebar stays from localhost:3000.

[@DaveGrayTeachesCode]

No, the parallel routes must be within the same project.

[@emmanueljulius1827]

In my usecase, I have an a dashboard with different user roles being returned on logging in, and I have to render a different dashboard view per role. So I'm leveraging nextjs parallel routes to implement this.

[@DaveGrayTeachesCode]

Great example use case!

[@odogwu-1918]

How does parallel route come into play here, I don't seem to get it

[@joe_j]

Can you do one on how I can use nextjs 15? Thankyou

[@sarthakagarwal8521]

Hi Dave,
What are benefits of using different routes here instead of having lets say two server components wrapped in suspense. Then also they will work independently and have separate loading states.

[@DaveGrayTeachesCode]

Yes, it's basically the same thing. Next.js offloads suspense to the loading UI file. Using the router instead of code to apply both suspense and error boundaries.

[@togya4]

Dave we want a new videoor whole full project with yhe new nextjs 15rc futures. Is that possible?

[@DaveGrayTeachesCode]

Let's wait until it's a stable release 🙂

[@togya4]

@@DaveGrayTeachesCode yeah totally right

[@aliksargsyan2782]

Is parallel routes similar to computer architecture like multy core parallelism?

[@DaveGrayTeachesCode]

Probably only in the way they both do something in parallel

[@BilalAulakh23]

Sir i subscribed your channel

[@DaveGrayTeachesCode]

Welcome!

[@jamesbotwina8744]

damn thats good content

[@EverydayBeing-de1qu]

I feel like this is just over complicating things for no reason... What is the advantage of this compared to using standard suspense boundaries?

[@DaveGrayTeachesCode]

It's also an error boundary and uses the Next.js router. You *may* consider those advantages or not. All frameworks are opinionated in some ways. This is simply the Next.js way.

[@EverydayBeing-de1qu]

@@DaveGrayTeachesCode Okay thank you for the reply

[@tonystank8105]

the default part got me confused honestly.

[@alirezatt4457]

❤

[@codeaperture]

Next 14 will work with this 😂?

[@DaveGrayTeachesCode]

Yes

[@siya.abc123]

I'll stick to using components, this is taking it too far imho 😅